<template>
  <div class="box">
    <ul>
      <li
        @click="hhh(index)"
        v-for="(item, index) in render"
        :key="index"
        :class="{ active: indexEle == index }"
      >
        {{ item.name }}
      </li>
    </ul>
    <main>
      <div class="main" v-for="(item, index) in list" :key="index">
        <div class="img">
          <img :src="item.pic" alt="" />
        </div>
        <div class="text">
          <div class="name">{{ item.name }}</div>
          <div class="desc">{{ item.desc }}好评率：100%</div>
          <div class="money">
            <span>{{ item.money }}</span>
            <div>+</div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import pic1 from "../assets/pic1.jpg";
import pic2 from "../assets/pic2.jpg";
import pic3 from "../assets/pic3.jpg";
import pic4 from "../assets/pic4.jpg";
import pic5 from "../assets/pic5.jpg";
import pic6 from "../assets/pic6.jpg";
import pic7 from "../assets/pic7.jpg";
export default {
  data() {
    return {
      indexEle: 0,
      render: [
        { name: "热销" },
        { name: "优惠" },
        { name: "三文鱼" },
        { name: "刺身" },
        { name: "年货礼品区" },
        { name: "野生大对虾" },
        { name: "冻货区" },
        { name: "贝壳螺类" },
        { name: "鲜虾活鱼" },
      ],
      list: [
        {
          id: 1,
          pic: pic1,
          name: "挪威三文鱼刺身~薄片",
          desc: "取于三文鱼中段。口腊鲜街，富含维...",
          money: "￥45",
        },
        {
          id: 2,
          pic: pic2,
          name: "国产生蚝-剽身",
          desc: "每份一只广东湖江生耗。个大肉肥。..",
          money: "￥8",
        },
        {
          id: 3,
          pic: pic3,
          name: "挪威纯鲜三文鱼~厚片",
          desc: "百分之百当天空活直达。国份号皮称，",
          money: "￥54.4",
        },
        {
          id: 4,
          pic: pic4,
          name: "北极甜虾",
          desc: "月售27切好评率100%,当属第一。。。",
          money: "￥22.4",
        },
      ],
    };
  },
  methods: {
    hhh(index) {
      this.indexEle = index;
      switch(this.indexEle){
          case 0: this.list=[
          {
            id: 1,
            pic: pic1,
            name: "挪威三文鱼刺身~薄片",
            desc: "取于三文鱼中段。口腊鲜街，富含维...",
            money: "￥45",
          },
          {
            id: 2,
            pic: pic2,
            name: "国产生蚝-剽身",
            desc: "每份一只广东湖江生耗。个大肉肥。..",
            money: "￥8",
          },
          {
            id: 3,
            pic: pic3,
            name: "挪威纯鲜三文鱼~厚片",
            desc: "百分之百当天空活直达。国份号皮称，",
            money: "￥54.4",
          },
          {
            id: 4,
            pic: pic4,
            name: "北极甜虾",
            desc: "月售27切好评率100%,当属第一。。。",
            money: "￥22.4",
          },
        ];
        case 1: this.list=[
        {
          id: 1,
          pic: pic5,
          name: "挪威三文鱼刺身~薄片",
          desc: "取于三文鱼中段。口腊鲜街，富含维...",
          money: "￥45",
        },
        {
          id: 2,
          pic: pic6,
          name: "国产生蚝-剽身",
          desc: "每份一只广东湖江生耗。个大肉肥。..",
          money: "￥8",
        },
        {
          id: 3,
          pic: pic7,
          name: "挪威纯鲜三文鱼~厚片",
          desc: "百分之百当天空活直达。国份号皮称，",
          money: "￥54.4",
        },
        {
          id: 4,
          pic: pic7,
          name: "北极甜虾",
          desc: "月售27切好评率100%,当属第一。。。",
          money: "￥22.4",
        },
      ];
      }
    },
  },
};
</script>

<style scoped>
.box {
  display: flex;
}
.box ul {
  width: 60px;
  min-height: 600px;
  text-align: center;
  margin-top: 20px;
}
.box ul li {
  margin-bottom: 20px;
}
.box main {
  flex: 1;
}
.box main .main {
  display: flex;
  justify-content: space-between;
}
.box main .main .img img {
  height: 100px;
  margin-top: 10px;
  margin-right: 10px;
}
.box main .main .text .name {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 10px;
}
.box .main .text .desc {
  color: gray;
}

.box .main .text .money {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
.box .main .text .money span {
  color: red;
}

.box .main .text .money div {
  background-color: rgb(23, 114, 217);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  text-align: center;
  color: white;
  margin-right: 20px;
}
.box ul li.active {
  color: red;
  font-weight: 700;
}
</style>